import React, {useEffect, useState} from "react";
import {DataNode} from "@/pages/script";
import {httpPost, Result} from "@/utils/http";
import {Button, Form, Input, message, Modal, Space, Spin} from "antd";
import {CheckOutlined, PoweroffOutlined} from "@ant-design/icons";
import styled from "@emotion/styled";

interface ModelProp {
    initData: ServerUpdateProp;
    visible: boolean;
    onCancel: (newData?: DataNode) => void;
}

export interface ServerUpdateProp {
    id: number;
    title: string;
    parent_id: number;
    work_path: string;
    desc?: string;
}

export const ServerUpdate: React.FC<ModelProp> = ({visible, initData, onCancel}) => {

    const [spinning, setSpinning] = useState<boolean>(false);
    const [form] = Form.useForm<ServerUpdateProp>();

    const submitData = () => {
        form.validateFields().then(value => {
            setSpinning(true);
            httpPost<Result<DataNode>, ServerUpdateProp>('/server/item/update', {...value}).then(res => {
                if (res.code === 100200) {
                    message.success(res.message);
                    closeModel(res.result)
                } else {
                    message.error(res.message);
                }
            }).finally(() => {
                setSpinning(false);
            })
        })
    }

    const closeModel = (data?: DataNode) => {
        form.resetFields();
        onCancel(data);
    }

    useEffect(() => {
        if (visible) {
            form.setFieldsValue({...initData})
        }
    }, [visible])


    return <Container
        width='30vw'
        destroyOnClose
        maskClosable={false}
        onCancel={() => onCancel(undefined)}
        open={visible}
        title="修改服务"
        okText="保存"
        cancelText="取消"
        footer={
            <Space>
                <Button type="primary" danger icon={<PoweroffOutlined />} onClick={() => closeModel(undefined)}>关闭</Button>
                <Button type="primary" icon={<CheckOutlined />} onClick={submitData}>保存</Button>
            </Space>
        }
    >
        <Spin tip="服务数据提交中......" spinning={spinning}>
            <Form labelCol={{ span: 4 }}
                  wrapperCol={{ span: 20 }}
                  form={form}
                  layout="horizontal"
                  name="form_in_modal"
            >
                <Form.Item name="id" style={{display: 'none'}}>
                    <Input placeholder="id" />
                </Form.Item>
                <Form.Item name="parent_id" style={{display: 'none'}}>
                    <Input placeholder="parent_id" />
                </Form.Item>
                <Form.Item name="title" label="服务名称" rules={[{ required: true, message: '请输入服务名称' }]}>
                    <Input placeholder="服务名称" />
                </Form.Item>
                <Form.Item name="work_path" label="服务编码" rules={[{ required: true, message: '请输入服务编码' }]}>
                    <Input placeholder="服务编码" />
                </Form.Item>
                <Form.Item name="desc" label="服务描述">
                    <Input.TextArea rows={3} placeholder="请输入服务描述" />
                </Form.Item>
            </Form>
        </Spin>
    </Container>
}

const Container = styled(Modal)`
	.ant-modal-body {
		margin-top: 30px;
	}
`
